<template>
  <div>
    <el-drawer
      :title="param.id ? $t('message.edit') + $t('message.zxk') : $t('message.add') + $t('message.zxk')"
      size="60%"
      :visible.sync="isShowDrawer"
      @close="closeDrawer"
    >
      <div>
        <el-form
          ref="form"
          class="doumee-form"
          :model="param"
          label-width="auto"
          label-suffix="："
          :rules="rules"
        >
          <div class="property-title">{{ $t('message.jcxx') }}</div>
          <el-form-item :label="$t('message.klx')" prop="type">
            <el-radio
              v-model="param.type"
              :disabled="Boolean(param.id)"
              label="1"
            >{{ $t('message.zyk') }}</el-radio>
            <el-radio
              v-model="param.type"
              :disabled="Boolean(param.id)"
              label="2"
            >{{ $t('message.lpk') }}</el-radio>
            <!-- <el-switch v-model="param.type" active-value="2" inactive-value="1" /> -->
            <div class="placeholder9" style="margin-top: -10px">{{ $t('message.zyksm') }}</div>
          </el-form-item>
          <el-form-item :label="$t('message.zxkmc')" prop="name">
            <el-input
              v-model="param.name"
              class="w400"
              :maxlength="50"
              :placeholder="$t('message.qsrmc20')"
            />
          </el-form-item>
          <el-form-item :label="$t('message.xsj')" prop="price">
            <el-input
              v-model="param.price"
              class="w400"
              maxlength="50"
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              :placeholder="$t('message.qsr') + $t('message.xsjg')"
            />
          </el-form-item>
          <el-form-item :label="$t('message.kmje')" prop="cardPrice">
            <el-input
              v-model="param.cardPrice"
              class="w400"
              maxlength="50"
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              :placeholder="$t('message.qsr') + $t('message.kmje')"
            />
          </el-form-item>
          <div class="df_ac">
            <el-form-item :label="$t('message.bjyxq')" prop="validTimeType">
              <el-radio
                v-model="param.validTimeType"
                label="1"
              >{{ $t('message.cqyx') }}</el-radio>
              <el-radio
                v-model="param.validTimeType"
                label="2"
              >{{ $t('message.zdyxq') }}</el-radio>
            </el-form-item>
            <div v-if="param.validTimeType == '2'" class="mb20 ml20">
              {{ $t('message.gmjhh') }}
            </div>
            <el-form-item
              v-if="param.validTimeType == '2'"
              class="ml10"
              label-width="0"
              prop="validTime"
            >
              <template>
                <!-- <span>{{ $t('message.gmjhh') }}</span> -->
                <el-input
                  v-model="param.validTime"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
                  class="w100 mr10"
                />
                <span>{{ $t('message.tnyx') }}</span>
              </template>
            </el-form-item>
          </div>
          <div class="df_ac">
            <el-form-item :label="$t('message.sgzj')" prop="firstBuyIsGive">
              <el-radio
                v-model="param.firstBuyIsGive"
                label="0"
              >{{ $t('message.bzs') }}</el-radio>
              <el-radio
                v-model="param.firstBuyIsGive"
                label="1"
              >{{ $t('message.zsje') }}</el-radio>
            </el-form-item>
            <el-form-item
              v-if="param.firstBuyIsGive == '1'"
              prop="firstBuyGiveMoney"
              class="ml20"
              label-width="0px"
            >
              <template>
                <el-input
                  v-model="param.firstBuyGiveMoney"
                  oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                  class="w100 mr10"
                />
                <span>{{ $t('message.yuan') }}</span>
                <span class="ml20 mr10">{{ $t('message.zsh') }}</span>
              </template>
            </el-form-item>
            <el-form-item
              v-if="param.firstBuyIsGive == '1'"
              prop="firstGiveMoneyValidTime"
              label-width="0px"
            >
              <template>
                <el-input
                  v-model="param.firstGiveMoneyValidTime"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
                  class="w100 mr10"
                />
                <span>{{ $t('message.tnyx') }}</span>
              </template>
            </el-form-item>
          </div>
          <div class="df_ac">
            <el-form-item :label="$t('message.fgzj')" prop="repetitionBuyIsGive">
              <el-radio
                v-model="param.repetitionBuyIsGive"
                label="0"
              >{{ $t('message.bzs') }}</el-radio>
              <el-radio
                v-model="param.repetitionBuyIsGive"
                label="1"
              >{{ $t('message.zsje') }}</el-radio>
            </el-form-item>
            <el-form-item
              v-if="param.repetitionBuyIsGive === '1'"
              class="ml20"
              prop="repetitionBuyGiveMoney"
              label-width="0px"
            >
              <template>
                <el-input
                  v-model="param.repetitionBuyGiveMoney"
                  oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                  class="w100 mr10"
                />
                <span>{{ $t('message.yuan') }}</span>
                <span class="ml20 mr10">{{ $t('message.zsh') }}</span>
              </template>
            </el-form-item>
            <el-form-item
              v-if="param.repetitionBuyIsGive === '1'"
              prop="repetitionGiveMoneyValidTime"
              label-width="0px"
            >
              <template>
                <el-input
                  v-model="param.repetitionGiveMoneyValidTime"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
                  class="w100 mr10"
                />
                <span>{{ $t('message.tnyx') }}</span>
              </template>
            </el-form-item>
          </div>
          <el-form-item :label="$t('message.xsqd')" prop="channel">
            <el-checkbox-group v-model="param.channel">
              <el-checkbox label="01">{{ $t('message.xcxd') }}</el-checkbox>
              <el-checkbox label="02">{{ $t('message.cgd') }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div class="df_ac">
            <el-form-item :label="$t('message.smsj')" prop="sellTimeType">
              <el-radio
                v-model="param.sellTimeType"
                label="0"
              >{{ $t('message.cqsm') }}</el-radio>
              <el-radio
                v-model="param.sellTimeType"
                label="1"
              >{{ $t('message.xqsm') }}</el-radio>
            </el-form-item>
            <el-form-item
              v-if="param.sellTimeType == '1'"
              class="ml20"
              label-width="0"
              prop="selDate"
            >
              <el-date-picker
                v-model="param.selDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="~"
                :start-placeholder="$t('message.nyr')"
                :end-placeholder="$t('message.nyr')"
              />
            </el-form-item>
          </div>
          <el-form-item :label="$t('message.zxktp')" class="select-style" prop="avatar">
            <el-radio-group v-model="param.pictureType" @change="changeType">
              <el-radio
                v-for="(item, index) in defaultImgs"
                :key="index"
                :label="item.code"
              >{{ item.remaks }}</el-radio>
            </el-radio-group>
            <transition name="fade">
              <Cropper
                v-if="dialogCropperVisible"
                :option-img="optionImg"
                :fileinfo="fileinfo"
                use-type="SPECIAL_CARD_IMG"
                :fixed-number="[345, 198]"
                @formSubmit="cropperSubmit"
                @formClose="cropperClose"
              />
            </transition>
            <div class="upload-wrap df_ac">
              <el-upload
                v-if="param.pictureType == 'specialCardZero'"
                class="device-uploader"
                :action="uploadFileUrl"
                :data="uploadParam"
                :show-file-list="false"
                accept=".jpg,.png,.jpeg"
                :auto-upload="false"
                :on-change="addFileChange"
              >
                <i class="el-icon-plus uploader-icon" />
                <div
                  v-if="!param.allPath"
                  style="color: #999999; font-size: 14px; line-height: 20px"
                >
                  {{ $t('message.sctp') }}
                </div>
                <div
                  v-show="param.allPath"
                  class="file"
                  :style="'background-image: url(' + param.allPath + ')'"
                >
                  <div class="delete">
                    <i class="el-icon-delete icon" @click.stop="deleteImage" />
                  </div>
                </div>
              </el-upload>
              <div
                v-if="param.pictureType == 'specialCardZero'"
                class="placeholader tip-style"
              >
                <div class="placeholder9">{{ $t('message.jycc') }}：690px * 334px;</div>
                <div>
                  {{ $t('message.zctpsm') }}
                </div>
              </div>
            </div>
            <el-image
              v-if="param.pictureType != 'specialCardZero' && param.allPath"
              style="width: 174px; height: 84px"
              :src="param.allPath"
              :preview-src-list="[param.allPath]"
            />
          </el-form-item>
          <el-form-item :label="$t('message.sysm')">
            <!-- <WangEditor
              ref="myTextEditor"
              :value="param.useInfo"
              @input="(e) => $set(param, 'useInfo', e)"
            /> -->
            <quill-editor
              ref="myTextEditor"
              v-model="param.useInfo"
              :placeholder="$t('message.qsrnr')"
              class="myQuillEditor"
              :options="quillOption"
            />
          </el-form-item>
          <!--  -->
          <div class="property-title">{{ $t('message.sygz') }}</div>
          <el-form-item :label="$t('message.zfxs')">
            <el-input
              v-model="param.circulationAll"
              class="w200"
              oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
              maxlength="50"
              placeholder=""
            />
            <span
              class="placeholder9 ml10"
            >{{ $t('message.zfxssm') }}</span>
          </el-form-item>
          <el-form-item :label="$t('message.xfcy')" prop="useOrderTypes">
            <el-checkbox-group v-model="param.useOrderTypes">
              <el-checkbox
                v-for="item in orderTypes"
                :key="item.id"
                :label="item.id"
                @change="(e) => changeOrderType(item.id, e)"
              >{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item :label="$t('message.zkqx')">
            <div class="placeholder9">
              {{ $t('message.zksm10') }}
            </div>
            <el-table
              ref="table"
              :data="param.disCountItem"
              border
              fit
              :header-row-class-name="'table-header'"
              class="doumee-element-table"
            >
              <el-table-column align="center" :label="$t('message.xfcy')" min-width="120">
                <template slot-scope="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('message.zhekou')" min-width="120">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.discount"
                    :precision="1"
                    :min="0.1"
                    :max="10"
                    class="w100 mr10"
                  />
                  <span>{{ $t('message.zhe') }}</span>
                  <!-- <el-input v-model="scope.row.discount"><el-button slot="append">{{ $t('message.zhe') }}</el-button></el-input> -->
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('message.syfw')" min-width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.id === '02'">
                    <span v-if="scope.row.objTemp.length === 0">{{ $t('message.qbxm') }}</span>
                    <span v-else>{{ $t('message.gon') }}{{ scope.row.objTemp.length }}{{ $t('message.gxm') }}</span>
                  </span>
                  <span v-if="scope.row.id === '07'">
                    <span
                      v-if="
                        scope.row.objTemp.length === 4 ||
                          scope.row.objTemp.length === 0
                      "
                    >{{ $t('message.qbkc') }}</span>
                    <template v-else>
                      <span v-for="item in scope.row.objTemp" :key="item">
                        <span v-if="item == '1'" class="mr10">{{ $t('message.ttk') }}</span>
                        <span v-if="item == '3'" class="mr10">{{ $t('message.cqk') }}</span>
                        <span v-if="item == '4'" class="mr10">{{ $t('message.sjk') }}</span>
                        <span v-if="item == '5'" class="mr10">{{ $t('message.spk') }}</span>
                      </span>
                    </template>
                  </span>
                  <span v-if="scope.row.id === '03'">
                    <span v-if="scope.row.objTemp.length == 0">{{ $t('message.qbmp') }}</span>
                    <span v-else>{{ $t('message.gon') }}{{ scope.row.objTemp.length }}{{ $t('message.gmp') }}</span>
                  </span>
                  <span v-if="scope.row.id === '06'">
                    <span v-if="scope.row.objTemp.length === 0">{{ $t('message.qbfl') }}</span>
                    <span v-else>{{ $t('message.gon') }}{{ scope.row.objTemp.length }}{{ $t('message.gfl') }}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('message.caozuo')" min-width="80">
                <template slot-scope="scope">
                  <span
                    class="primaryColor pointer"
                    @click="handleConfig(scope.$index, scope.row)"
                  >{{ $t('message.pizhi') }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item>
            <el-button @click="closeDrawer">{{ $t('message.qx') }}</el-button>
            <el-button
              v-preventReClick
              :loading="subLoading"
              type="primary"
              @click="onSubmit"
            >{{ $t('message.tj') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <el-dialog
      v-if="isShowConfig"
      :title="activeRow.title"
      :visible.sync="isShowConfig"
      width="800px"
    >
      <template v-if="activeRow.id == '02' || activeRow.id == '03'">
        <el-table
          ref="table"
          :data="venueProList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="$t('message.cgmc')"
            prop="name"
            min-width="120"
          />
          <el-table-column align="center" :label="$t('message.xm')" min-width="240">
            <template slot-scope="scope">
              <el-checkbox-group v-model="activeRow.obj">
                <el-checkbox
                  v-for="item in scope.row.projects"
                  :key="item.id"
                  :label="item.id"
                >{{ item.projectName }}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-if="activeRow.id == '06'">
        <el-table
          ref="table"
          :data="goodsCate"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="$t('message.cgmc')"
            prop="venueName"
            min-width="120"
          />
          <el-table-column align="center" :label="$t('message.spfl')" min-width="120">
            <template slot-scope="scope">
              <el-checkbox-group v-model="activeRow.obj">
                <el-checkbox
                  v-for="i in scope.row.item"
                  :key="i.id"
                  :label="i.id"
                >{{ i.name }}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-if="activeRow.id == '07'">
        <el-checkbox-group v-model="activeRow.obj">
          <el-checkbox label="1">{{ $t('message.ttk') }}</el-checkbox>
          <el-checkbox label="3">{{ $t('message.cqk') }}</el-checkbox>
          <el-checkbox label="4">{{ $t('message.sjk') }}</el-checkbox>
          <el-checkbox label="5">{{ $t('message.spk') }}</el-checkbox>
        </el-checkbox-group>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowConfig = false">{{ $t('message.qx') }}</el-button>
        <el-button type="primary" @click="subConfig">{{ $t('message.qr') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  uploadFile,
  goodsCateAndVenue,
  venueProjectList,
  defaultImage,
  orderTypeb,
  SpeailCardEdit,
  SpeailCardEcho
} from '@/api'
import Cropper from '@/components/cropper'
// import WangEditor from '@/components/quillOption'
import { quillEditor } from 'vue-quill-editor'
import quillConfig from '@/api/sc.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    Cropper,
    quillEditor
  },
  data() {
    return {
      quillOption: quillConfig,
      isShowDrawer: false,
      subLoading: false,
      param: {
        channel: ['02'],
        useVenueIds: [sessionStorage.getItem('venueId')],
        useOrderTypes: [],
        disCountItem: [],
        pictureType: '',
        type: '1',
        validTimeType: '1',
        firstBuyIsGive: '0',
        repetitionBuyIsGive: '0',
        sellTimeType: '0',
        isAllVenue: '0'
      },
      venueProList: [],
      defaultImgs: [],
      orderTypes: [],
      goodsCate: [],
      ticketList: [],

      isShowConfig: false,
      activeRow: {
        obj: []
      },
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'SPECIAL_CARD_IMG'
      },
      rules: {
        repetitionBuyGiveMoney: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        repetitionGiveMoneyValidTime: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        firstGiveMoneyValidTime: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        firstBuyGiveMoney: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        validTime: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        name: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        price: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        cardPrice: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        channel: [{ required: true, message: this.$t('message.qxz'), trigger: 'change' }],
        useOrderTypes: [{ required: true, message: this.$t('message.qxz'), trigger: 'change' }],
        validTimeType: [{ required: true, message: this.$t('message.qxz'), trigger: 'change' }],
        repetitionBuyIsGive: [{ required: true, message: this.$t('message.qxz'), trigger: 'change' }],
        firstBuyIsGive: [{ required: true, message: this.$t('message.qxz'), trigger: 'change' }],
        selDate: [{ required: true, message: this.$t('message.qxz'), trigger: 'change' }],
        useVenueIds: [{ type: 'array', required: true, message: this.$t('message.qxz'), trigger: 'change' }]

      },
      optionImg: '',
      fileinfo: {},
      dialogCropperVisible: false
    }
  },
  created() {
    // 获取默认样式
    this.getDefaultImage()
    // 获取消费场景
    this.getOrderType()
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const param = JSON.parse(JSON.stringify(this.param))
          param.channel = param.channel.join(',')
          if (param.sellTimeType === '1' && param.selDate.length > 0) {
            param.sellTimeStartString = param.selDate[0]
            param.sellTimeEndString = param.selDate[1]
          }
          let count = 0
          param.disCountItem.forEach(item => {
            item.objTemp = item.objTemp || []
            item.obj = item.objTemp.join(',')
            if (item && item.discount) {
              item.discount = item.discount / 10
            } else {
              count++
            }
          })
          if (count > 0) return this.$message.warning(this.$t('message.qxdyzkqjsrzk'))
          this.subLoading = true
          SpeailCardEdit({ param }).then(res => {
            this.subLoading = false
            if (res.errorCode !== '000000') return
            this.$message.success(this.$t('message.tjcg'))
            this.$emit('success')
            this.closeDrawer()
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    changeOrderType(id, e) {
      // console.log(id, e)
      // console.log(this.param.disCountItem)

      const activeIndex = this.param.disCountItem.findIndex(i => i.id === id)
      if (activeIndex !== -1) {
        this.param.disCountItem.splice(activeIndex, 1)
      } else {
        const obj = this.orderTypes.find(i => i.id === id)
        this.param.disCountItem.push({ ...obj, orderType: obj.id, discount: 10, obj: '', objTemp: [] })
      }
    },
    venueChange() {
      if (this.param.disCountItem && this.param.disCountItem.length > 0) {
        this.param.disCountItem.forEach(item => {
          item.obj = ''
          item.objTemp = []
        })
      }
    },
    selVenueChange(e, venueId) {
      // console.log(e, venueId)
      if (!e) {
        venueProjectList({ param: { type: '1' }}).then(res => {
          this.venueProList = res.recordList
          // console.log('venueId', this.venueProList)
          this.venueProList.forEach(item => {
            if (item.id === venueId) {
              // console.log(venueId, item)
              const projectTemp = item.projects.map(i => i.id)
              // console.log('projectTemp', projectTemp)
              // console.log('disCountItem', this.param.disCountItem)
              this.param.disCountItem.forEach(disItem => {
                projectTemp.forEach(selPro => {
                  const index = disItem.objTemp.indexOf(selPro)
                  if (index > -1) {
                    disItem.objTemp.splice(index, 1)
                  }
                })
              })
            }
          })
        })
        venueProjectList({ param: { type: '2' }}).then(res => {
          this.venueProList = res.recordList
          // console.log('venueId', this.venueProList)
          this.venueProList.forEach(item => {
            if (item.id === venueId) {
              // console.log(venueId, item)
              const projectTemp = item.projects.map(i => i.id)
              // console.log('projectTemp', projectTemp)
              // console.log('disCountItem', this.param.disCountItem)
              this.param.disCountItem.forEach(disItem => {
                projectTemp.forEach(selPro => {
                  const index = disItem.objTemp.indexOf(selPro)
                  if (index > -1) {
                    disItem.objTemp.splice(index, 1)
                  }
                })
              })
            }
          })
        })
        goodsCateAndVenue({ param: { isFromShop: '1' }}).then(res => {
          this.goodsCate = res.recordList
          this.goodsCate.forEach(item => {
            if (item.venueId === venueId) {
              // console.log(venueId, item)
              const projectTemp = item.item.map(i => i.id)
              // console.log('projectTemp', projectTemp)
              // console.log('disCountItem', this.param.disCountItem)
              this.param.disCountItem.forEach(disItem => {
                projectTemp.forEach(selPro => {
                  const index = disItem.objTemp.indexOf(selPro)
                  if (index > -1) {
                    disItem.objTemp.splice(index, 1)
                  }
                })
              })
            }
          })
        })
      }
    },
    subConfig() {
      // console.log(this.activeRow)
      const { index } = this.activeRow
      const temp = [...this.param.disCountItem]
      temp[index].obj = this.activeRow.obj.join(',')
      temp[index].objTemp = this.activeRow.obj
      this.$set(this.param, 'disCountItem', temp)
      // console.log('activeRow', this.param.disCountItem)
      this.isShowConfig = false
    },
    handleConfig(index, row) {
      // console.log('row', row)
      if (row.id === '02') {
        row.title = this.$t('message.xmpz')
        this.getVenueListByIds('1')
      } else if (row.id === '07') {
        row.title = this.$t('message.kcpz')
      } else if (row.id === '06') {
        row.title = this.$t('message.sppz')
        this.getGoodsCate()
      } else if (row.id === '03') {
        row.title = this.$t('message.mppz')
        this.getVenueListByIds('2')
      }
      this.activeRow = { ...row, obj: row.objTemp || [], index }
      this.isShowConfig = true
    },
    getDetail(id, str) {
      SpeailCardEcho({ param: { id }}).then(res => {
        const temp = res.record
        if (str && str === 'copy') {
          temp.id = null
        }
        if (temp.sellTimeType === '1' && temp.sellTimeStartString) {
          temp.selDate = [temp.sellTimeStartString, temp.sellTimeEndString]
        } else {
          temp.selDate = []
        }
        temp.channel = temp.channel.split(',')
        if (temp.disCountItem && temp.disCountItem.length > 0) {
          temp.disCountItem.forEach(item => {
            const temp = this.orderTypes.find(i => i.id === item.orderType)
            item.name = temp.name
            item.id = temp.id
            item.obj = item.obj || ''

            if (item.obj) {
              item.objTemp = item.obj.split(',')
            } else {
              item.objTemp = []
            }
            item.title = temp.name
            if (item.discount) {
              item.discount = item.discount * 10
            }
          })
        }

        this.param = { ...temp }
      })
    },
    getGoodsCate() {
      goodsCateAndVenue({ param: { venueIds: [sessionStorage.getItem('venueId')], isFromShop: '1', isSearchAllVenue: this.param.isAllVenue }}).then(res => {
        this.goodsCate = res.recordList
      })
    },
    getVenueListByIds(type) {
      venueProjectList({ param: { type, venueIds: [sessionStorage.getItem('venueId')], isSearchAllVenue: this.param.isAllVenue }}).then(res => {
        this.venueProList = res.recordList
      })
    },
    getDefaultImage() {
      defaultImage({ param: { type: '7' }}).then(res => {
        this.defaultImgs = res.record
        if (!this.param.id && this.defaultImgs.length > 0) {
          this.$set(this.param, 'pictureType', res.record[0].code)
          this.$set(this.param, 'picturePath', res.record[0].pic)
          this.$set(this.param, 'allPath', res.record[0].showPic)
          this.$nextTick(() => {
            this.$refs.form.clearValidate()
          })
        }
      })
    },
    getOrderType() {
      orderTypeb({ param: { type: 'SPECIAL_CARD_USE_ORDER_TYPE' }}).then(res => {
        this.orderTypes = res.recordList || []
      })
    },
    changeType(e) {
      if (e === 'cardZero') {
        this.$set(this.param, 'picturePath', '')
        this.$set(this.param, 'allPath', '')
      } else {
        const arr = this.defaultImgs
        arr.forEach(s => {
          if (s.code === e) {
            this.$set(this.param, 'picturePath', s.pic)
            this.$set(this.param, 'allPath', s.showPic)
          }
        })
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    closeDrawer() {
      this.isShowDrawer = false
      this.$emit('close')
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.param, 'allPath', config.showUrl)
        this.$set(this.param, 'picturePath', config.insertUrl)
        this.dialogCropperVisible = false
        this.$refs.form.clearValidate()
      } else {
        this.$message.error(config.msg || this.$t('message.scsb'))
        this.$refs.form.clearValidate()
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    async addFileChange(file, fileList) {
      // 上传，拿到file文件
      // this.files = file.raw;
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 删除头像
    deleteImage() {
      this.$set(this.param, 'allPath', '')
      this.$set(this.param, 'picturePath', '')
    }

  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.device-uploader {
  width: 115px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.df_ac {
  line-height: 20px;
}
</style>
